<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
const tab=ref("set")

const form = ref({
    headimg: '',
    mobile: '',
    name: '',
    qq: '',
    wechat: ''
})
</script>


<template>
		<el-tabs tabPosition="left" v-model="tab" class="setting">
			<el-tab-pane label="基本设置" name="set">
				
						<h2>基本设置</h2>
						<el-row :gutter="20">
							<el-col :span="16">
								<el-form ref="formRef" :model="form" label-width="120px" label-suffix="：">
									<el-form-item label="名 称">
										<el-input v-model="form.name" placeholder="请输入你的名称" />
									</el-form-item>
									<el-form-item label="手机号">
										<el-input v-model="form.mobile" placeholder="请输入你的手机号" />
									</el-form-item>
									<el-form-item label="QQ 号">
										<el-input v-model="form.qq" placeholder="请输入你的 QQ 号" />
									</el-form-item>
									<el-form-item label="微信号">
										<el-input v-model="form.wechat" placeholder="请输入你的微信号" />
									</el-form-item>
									<el-form-item>
										<el-button type="primary">保存</el-button>
									</el-form-item>
								</el-form>
							</el-col>
							<el-col :span="8">
							</el-col>
						</el-row>
			</el-tab-pane>
			<el-tab-pane label="基本设置2" name="set2">基本设置2</el-tab-pane>
		</el-tabs>
</template>


<style scoped>
:deep(.is-active) {
	background-color:#ecf5ff;
}
.setting{
	background-color: #fff;
	height: calc( 100% - 20px);
    padding: 10px;
}
h2{
	margin-left: 40px;
	font-weight: 400;
}
</style>